import { Color, Matrix4, Vector3, Quaternion } from 'https://unpkg.com/three/build/three.module.js';
import { initShaders, ScaleLinear, imgPromise } from '../jsm/Utils.js';
import lib from '../jsm/ThreeLib.js';
import Poly from '../jsm/Poly3.js'
import Sky from '../jsm/Sky.js'
import ShapeGeo from '../jsm/ShapeGeo.js';
import ImageJump from '../jsm/ImageJump.js'

window.onload = function () {

    const canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;


    const gl = canvas.getContext("webgl");
    // //开启颜色合成,才会有透明度的感觉
    // gl.enable(gl.BLEND);
    // gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
    // //开始背景遮挡
    gl.enable(gl.DEPTH_TEST);

    //初始化着色器
    initShaders(gl,
        document.querySelector("#vertexShader").innerText,
        document.querySelector("#fragmentShader").innerText);
    lib.clearCanvas(gl, new Color("rgba(255,255,255,1)"), 1);


    const x = 0.5;
    const y = lib.getImageCentre(0.5, 1);
    const size = 20.0;
    let arr = [
        -x, -y, size,
        -x, y, size,
        x, -y, size,
        x, y, size,
    ];

    let poly = new Poly({
        gl: gl,
        arr: arr,
        list: [
            { name: 'a_Position', size: 2, beginIndex: 0 },
            { name: 'a_PointSize', size: 1, beginIndex: 2 },
        ],
    });

    poly.draw(["TRIANGLE_STRIP", "POINTS"])


    const pixel = new Uint8Array(4);

    gl.readPixels(
        canvas.width / 2, canvas.height / 2,
        1, 1,
        gl.RGBA,
        gl.UNSIGNED_BYTE,
        pixel);

    console.log(pixel)

};
